<template>
  <div class="cont">
    <div>
      <ul>
        <li @click="goodsDetail(book.id)"><img :src="$store.state.baseImgUrl+book.img" style="    position: relative;
    top: 0em;" alt=""></li>
        <li>
          <p style="font-size: 16px;margin-top: 24px;">{{ book.name }}</p>
          <p>价格：<strong style="font-size: 20px;color: red">{{ book.price }}</strong></p>
          <p>销量 <strong style="color: red;">{{ book.saleCount }}</strong></p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "List1",
  data(){
    return{
    }
  },
  methods:{
    goodsDetail(curBookId){
      this.$router.push({path:'/purchasePage',query:{curBookId:curBookId}})
    }
  },
  props:{
    book:{
    }
  }
}
</script>

<style scoped>

.cont{
  float: left;
  font-size: 16px;
  width: 9em;
  /*text-align: center;*/
}
.cont div{
  width: 200px;
  height: 180px;
}
.cont img{
  width: 160px;
  height: 160px;
}
.cont ul li{
  float: left;
  font-size: 12px;
  width: 13em;
  margin-left: 10px;
}
.cont ul{
  width: 25em;
  height: 12em;
  margin-top: 18px;
}
</style>